<template>
  <div class="root">
    <wux-landscape :visible="showLandscape" @close="closeLandscape()">
      <image
        src="https://erp.0511mzone.com/upload/static/red.png"
        style="height: 300px"
        @click="toPerfectPage"
      />
    </wux-landscape>
    <wux-toptips id="wux-toptips" />
    <wux-dialog id="wux-dialog" />
    <div class="search_bannar">
      <div class="shop-info" @click="getShopList">
        <i class="shop-location iconfont icon-aui-icon-location"></i>
        {{ shop.title === undefined ? "请选择酒店" : shop.title }}
      </div>
    </div>
    <swiper
      class="swiper"
      indicator-dots="true"
      autoplay="true"
      interval="5000"
      duration="1000"
    >
      <block v-for="(item, index) in movies" :index="index" :key="item">
        <swiper-item @click="showGaller(index)">
          <image :src="item.banner" class="slide-image" mode="aspectFill" />
        </swiper-item>
      </block>
    </swiper>
    <ul class="model">
      <li
        v-for="(item, index) in models"
        :key="index"
        :class="'model-item ' + item.vip"
        @click="toSinglePage(item.status, item.path)"
      >
        <i :class="'iconfont icon-' + item.icon"></i>
        <span class="model-item-value">{{ item.value }}</span>
      </li>
    </ul>
    <div class="lease-content">
      <wux-divider text="会员推荐" class="divider"></wux-divider>
      <wux-spin nested :spinning="leaseSpinning">
        <div class="lease-container">
          <div
            v-for="(item, index) in leaseList"
            :key="index"
            class="lease-item"
            @click="toLeaseDetail(item.id)"
          >
            <!-- <div style="background-color: red"></div> -->
            <img :src="item.img" />
            <div class="lease-title">{{ item.title }}</div>
            <div class="lease-money">
              <span class="val">{{ item.timeoutPay }} 元</span>
              /
              {{ item.cycleVal }}
            </div>
          </div>
        </div>
      </wux-spin>
    </div>
    <div class="goods-content">
      <div class="goods-title">
        <div class="title">热销商品</div>
        <div class="more" @click="more">查看更多 ></div>
      </div>
      <!-- <wux-divider text="热门商品" position="left" dashed class="divider"></wux-divider> -->
      <wux-spin nested :spinning="hotSpinning">
        <goodsList :goods="goods" :showStyle="false"></goodsList>
      </wux-spin>
    </div>
    <div class="information">
      <div class="information-title">
        <div class="title">游记资讯</div>
        <!-- <div class="more" @click="moreInformation">查看更多 ></div> -->
      </div>
      <div class="information-content">
        <scroll-view scroll-x="true">
          <wux-spin nested :spinning="travelListSpning">
            <div
              class="infor-content"
              v-for="(item, index) in travelList"
              :key="index"
            >
              <div class="infor-container" @click="toTravelDetail(item.id)">
                <img :src="item.img" />
                <div class="content">
                  <div class="title">{{ item.title }}</div>
                  <div class="tips">{{ item.subTitle }}</div>
                  <div class="date">{{ item.publishTime }}</div>
                </div>
              </div>
            </div>
          </wux-spin>
        </scroll-view>
      </div>
    </div>
  </div>
</template>

<script>
import goodsList from "@/components/goods/goodsList";
import typeApi from "@/api/types";
import leaseApi from "@/api/lease";
import wxApi from "@/api/wx_api";
import travelApi from "@/api/travel";
import shopApi from "@/api/room";
import { $wuxToptips, $wuxDialog } from "../../static/wux/index";

export default {
  components: {
    goodsList,
  },
  data() {
    return {
      hotSpinning: false,
      leaseSpinning: false,
      showLandscape: false,
      travelListSpning: false,
      goods: [],
      leaseList: [],
      travelList: [],
      movies: [
        // { banner: "https://erp.0511mzone.com/upload/static/1.png" },
        // { banner: "https://erp.0511mzone.com/upload/static/2.png" },
        // { banner: "https://erp.0511mzone.com/upload/static/3.png" },
      ],
      models: [
        {
          icon: "VIP1",
          value: "会员服务",
          status: 0,
          path: "/pages/borrowList",
          vip: "show-vip",
        },
        {
          icon: "daizi-",
          value: "商品",
          status: 0,
          path: "/pages/productList",
          vip: "",
        },
        // {
        //   icon: "icon_xinyong_xianxing_jijin-",
        //   value: "客房预订",
        //   status: 0,
        //   path: "/pages/roomList",
        //   vip: ''
        // }
        // { icon: "tuangou", value: "团购", status: 1 },
        // { icon: "miaosha", value: "限时秒杀", status: 1 }
      ],
    };
  },
  computed: {
    shop() {
      const storeShop = this.$store.state.shop;
      const self = this;
      if (storeShop.id === undefined) {
        $wuxDialog().alert({
          resetOnClose: true,
          title: "提示",
          content: "请先选择门店",
          buttons: [
            {
              text: "前去设置",
              type: "primary",
              onTap() {
                self.$router.push({ path: "/pages/shopList" });
              },
            },
          ],
        });
      } else {
        // if (
        //   !this.$store.state.showLandscape &&
        //   (this.$store.state.user.realName === undefined ||
        //     this.$store.state.user.realName === "")
        // ) {
        if (!this.$store.state.showLandscape) {
          this.showLandscape = true;
        }
      }
      return this.$store.state.shop;
    },
  },
  onShow() {
    if (
      !this.$store.state.showLandscape &&
      this.$store.state.shop.id !== undefined 
      // && (this.$store.state.user.realName === undefined ||
      //   this.$store.state.user.realName === "")
    ) {
      this.showLandscape = true;
    }
    if (this.$store.state.cart.length === 0) {
      wx.removeTabBarBadge({
        index: 2,
      });
    } else {
      wx.setTabBarBadge({
        index: 2,
        text: this.$store.state.cart.length + "",
      });
    }
  },
  mounted() {
    if (this.$store.state.user.openId) {
      this.$http
        .request({
          url: wxApi.wxRefresh,
          method: "POST",
          body: { openId: this.$store.state.user.openId },
        })
        .then((userRes) => {
          this.$store.commit("saveUser", userRes);
        });
    }

    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
    this.queryHotCommodities();
    this.queryHotLeaseList();
    this.queryShopBanner();
    this.queryTravelList();
  },
  methods: {
    toLeaseDetail(id) {
      this.$store.commit("saveProductId", id);
      this.$router.push({
        path: "/pages/leaseDetails",
      });
    },
    toPerfectPage() {
      this.$router.push({ path: "/pages/perfect" });
    },
    closeLandscape() {
      this.$store.commit("saveShowLandscape", true);
      this.showLandscape = false;
    },
    more() {
      this.$router.push({ path: "/pages/productList" });
    },
    moreInformation() {
      console.log("moreInformation");
    },
    showGaller(index) {
      if (
        this.movies[index] &&
        this.movies[index].url &&
        this.movies[index].url !== ""
      ) {
        let title =
          this.movies[index].title === undefined
            ? "卡卡伴旅"
            : this.movies[index].title;
        this.$router.push({
          path:
            "/pages/newPage?newSrc=" +
            this.movies[index].url +
            "&title=" +
            title,
        });
      }
      // $wuxGallery().show({
      //   index,
      //   urls: that.movies.map((n) => ({ image: n.banner })),
      //   showDelete: false
      // });
    },
    getShopList() {
      this.$router.push({ path: "/pages/shopList" });
    },

    queryShopBanner() {
      let self = this;
      let sId = this.$store.state.shop.id;
      this.$http
        .post({
          url: shopApi.queryShopBanner,
          method: "POST",
          body: {
            sId: sId,
          },
        })
        .then((res) => {
          self.movies.splice(0, self.movies.length);
          res.list.map((n) => {
            if (n && n.banner) {
              self.movies.push(n);
            }
          });
        })
        .then((res) => {});
    },
    queryHotLeaseList() {
      const self = this;
      let sId = this.$store.state.shop.id;
      if (sId !== undefined) {
        this.leaseSpinning = true;
        this.$http
          .post({
            url: leaseApi.queryHotLeaseList,
            method: "POST",
            body: {
              sId: sId,
            },
          })
          .then((res) => {
            self.leaseSpinning = false;
            self.leaseList = res.list;
          })
          .then((res) => {
            self.leaseSpinning = false;
          });
      }
    },
    queryTravelList() {
      const self = this;
      let sId = this.$store.state.shop.id;
      if (sId !== undefined) {
        this.travelListSpning = true;
        this.$http
          .post({
            url: travelApi.queryHotTravelList,
            method: "POST",
            body: {
              sId: sId,
              status: 1,
            },
          })
          .then((res) => {
            self.travelListSpning = false;
            res.list.map((item) => {
              item.subTitle = this.getText(item.content);
              item.publishTime = this.getYearMonth(item.publishTime);
            });
            self.travelList = res.list;
          })
          .then((res) => {
            self.travelListSpning = false;
          });
      }
    },
    queryHotCommodities() {
      const self = this;
      let sId = this.$store.state.shop.id;
      if (sId !== undefined) {
        this.hotSpinning = true;
        this.$http
          .post({
            url: typeApi.queryHotCommodities,
            method: "POST",
            body: {
              sId: sId,
            },
          })
          .then((res) => {
            self.hotSpinning = false;
            self.goods = res.list;
          })
          .then((res) => {
            self.hotSpinning = false;
          });
      }
    },
    getText(str) {
      return str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "");
    },
    toTravelDetail(id) {
      this.$store.dispatch("saveTravelId", id);
      this.$router.push({ path: "/pages/travelDetail" });
    },
    getYearMonth(date) {
      // 将日期以空格隔开，即['2020-06-13', '17:10:09']
      date = (date + "").split(/[ ]+/);
      let result = [];
      let reg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
      // 用截取出来的年月日进行正则表达式匹配
      reg.exec(date[0]);
      result.push(RegExp.$1); //获取匹配到的第一个子匹配，即‘2020’
      result.push(RegExp.$2);
      result.push(RegExp.$3);
      return result.join("-");
    },
    toSinglePage(status, path) {
      if (status === 1) {
        $wuxToptips().warn({
          hidden: false,
          text: "该功能暂未开放!",
          duration: 1000,
          success() {},
        });
      } else {
        this.$router.push({ path: path });
      }
    },
  },
};
</script>
<style scoped lang="less">
.root {
  background-color: #efefef;
  .search_bannar {
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    .logo {
      float: left;
      width: 80px;
      height: 40px;
    }
    .shop-info {
      float: left;
      margin-left: 10px;
      font-size: 16px;
      font-weight: 200;
      .shop-location {
        font-weight: 500;
        display: inline-block;
        // color: rgb(255, 166, 0);
        color: #c89f62;
        font-size: 16px;
        margin-right: 5px;
      }
    }
  }
  .swiper {
    height: 230px;
    margin-bottom: 5px;
    .slide-image {
      height: 100%;
      width: 100%;
    }
  }
  .model {
    display: flex;
    .model-item {
      margin: 5px auto;
      display: block;
      flex: 1;
      text-align: center;
      .iconfont {
        font-size: 20px;
      }
      .model-item-value {
        font-size: 13px;
        padding: 5px 5px 0 5px;
        display: block;
      }
    }
    .show-vip {
      color: #c89f62;
    }
    background-color: #fff;
  }
  .information {
    margin-top: 5px;
    background-color: #fff;
    .information-title {
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e8e8e8;
      .title {
        font-weight: 500;
        flex-grow: 3;
        text-align: left;
        font-size: 16px;
      }
      .more {
        text-align: right;
        flex-grow: 1;
        font-size: 12px;
        color: #cccccc;
      }
    }
    .information-content {
      width: 100%;
      height: 200px;
      padding: 8px 0;
      box-sizing: border-box;
      display: flex;
      white-space: nowrap; //这个属性很重要
      .infor-content {
        width: 65%;
        height: 100%;
        margin: 0 8px;
        display: inline-block;
        .infor-container {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          img {
            width: 100%;
            height: 116px;
            flex-grow: 2;
          }
          .content {
            flex-grow: 1;
            .title {
              padding-top: 5px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .tips {
              padding: 5px 0;
              color: #585858;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 12px;
            }
            .date {
              color: #cacaca;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  .lease-content {
    margin-top: 5px;
    .lease-container {
      display: flex;
      flex-wrap: wrap;
      padding: 1px;
      box-sizing: border-box;
      .lease-item {
        width: 46%;
        margin: 7px;
        position: relative;
        img {
          height: 138px;
          width: 100%;
        }
        .lease-title {
          /* position: absolute; */
          width: 100%;
          bottom: 1px;
          padding: 5px 0;
          text-align: center;
          /* background-color: #0000006e; */
          /* color: #fff; */
          font-size: 14px;
          font-weight: 300;
        }
        .lease-money {
          font-weight: 300;
          text-align: center;
          .val {
            font-weight: 400;
            color: #c89f62;
            font-size: 13px;
          }
        }
      }
    }
    .divider {
      text-align: center;
      font-size: 20px;
      padding: 5px 0;
      display: block;
    }
    background-color: #fff;
  }
  .goods-content {
    margin-top: 5px;
    background-color: #fff;
    .goods-title {
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e8e8e8;
      .title {
        font-weight: 500;
        flex-grow: 3;
        text-align: left;
        font-size: 16px;
      }
      .more {
        text-align: right;
        flex-grow: 1;
        font-size: 12px;
        color: #cccccc;
      }
    }
  }
}
</style>